<template>
  <div class="my-middle-box">
    <van-cell title="订单管理" class="cell">
      <template #right-icon>
        <p style="font-size:16px; color: #999 ;">全部订单</p>
        <van-icon name="arrow" class="search-icon" />
      </template>
    </van-cell>
    <van-grid :column-num="4" class="grid" :square="true">
      <van-grid-item
        icon="cluster-o"
        text="全部"
        icon-color="#1a9956"
        class="left"
      />
      <van-grid-item
        icon="underway-o"
        text="进行中"
        icon-color="#1a9956"
      />

      <van-grid-item
        icon="passed"
        text="已完成"
        icon-color="#1a9956"
      />
      <van-grid-item
        icon="smile-comment-o"
        text="取消"
        icon-color="#1a9956"
      />
    </van-grid>
  </div>
</template>
  
  <script lang="ts" setup>
</script>
  
  <style scoped>
.my-middle-box {
  width: 100%;
  height: 150px;
  border-radius: 20px;
}
.van-icon {
  margin-top: 6px;
}
.cell {
  border-radius: 20px 20px 0 0;
}
.van-grid {
  border-radius: 0 0 20px 20px;
}

</style>